<template>
	<view class="yxyl-audio-container">
		<scroll-view v-if="hasText" scroll-y="true" class="yxyl-audio-scroll"><rich-text class="yxyl-audio-text" :nodes="nodes_text"></rich-text></scroll-view>
		<view class="yxyl-audio-control">
			<view class="yxyl-audio-control-item">
				<view class="yxyl-audio-control-item-avatar"><image :src="logo" class="image"></image></view>
				<view class="yxyl-audio-control-item-right">
					<text class="title">{{ title }}</text>
					<view class="slider-container">
						<text class="rod">{{ currentTime }}</text>
						<slider
							class="slider"
							:value="current"
							min="0"
							:max="duration"
							@change="change"
							@changing="changing"
							block-size="12"
							activeColor="#F44336"
							block-color="#F44336"
							:disabled="disabled"
						/>
						<text class="rod">{{ endTime }}</text>
					</view>
				</view>
			</view>
			<view class="yxyl-audio-control-item">
				<view class="yxyl-audio-control-btns">
					<view class="btn" @tap="Prev">
						<fa-icon class="icon" color="#808080" type="step-backward" size="20"></fa-icon>
						<text class="text">上一曲</text>
					</view>
					<view class="btn" :class="{ hidden: playing }" @tap="Play">
						<fa-icon class="icon" color="#808080" type="play-circle-o" size="20"></fa-icon>
						<text class="text">播放</text>
					</view>
					<view class="btn" v-show="playing" :class="{ hidden: !playing }" @tap="Pause">
						<fa-icon class="icon" color="#808080" type="stop-circle-o" size="20"></fa-icon>
						<text class="text">停止</text>
					</view>
					<view class="btn" @tap="Next">
						<fa-icon class="icon" color="#808080" type="step-forward" size="20"></fa-icon>
						<text class="text">下一曲</text>
					</view>
					<view class="btn" @tap="Circle">
						<fa-icon class="icon" :color="isCircle ? '#F44336' : '#808080'" type="refresh" size="20"></fa-icon>
						<text class="text">循环</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import parseHtml from '@/util/html-parser.js';
import { formatDuration } from '@/util/stringUtil.js';
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
let audioManager = null;
// #ifdef MP-WEIXIN
audioManager = uni.getBackgroundAudioManager();
// #endif
// #ifdef H5
audioManager = uni.createInnerAudioContext();
// #endif
export default {
	components: { faIcon },
	data() {
		return {
			playing: false,
			duration: 0,
			current: 0,
			isSeeking: false,
			isCircle: false,
			disabled: false,
			isReport: true
		};
	},
	props: {
		itemChange: Number,
		hasText: {
			type: Boolean,
			default: false
		},
		text: {
			type: String,
			default() {
				return '';
			}
		},
		logo: {
			type: String,
			default() {
				return 'http://img-ali.cnyanglao.com/logo.png';
			}
		},
		title: {
			type: String,
			default() {
				return '';
			}
		},
		singer: {
			type: String,
			default() {
				return '';
			}
		},
		src: {
			type: String,
			default() {
				return '';
			}
		},
		prevSrc: {
			type: String,
			default() {
				return '';
			}
		}
	},
	
	computed: {
		nodes_text: function() {
			var res = parseHtml(this.text);
			return res;
		},
		endTime: function() {
			var res = formatDuration(this.duration);

			return res;
		},
		currentTime: function() {
			return formatDuration(this.current);
		}
	},
	watch: {
		src(value) {
			if (value) {
				this.InitAudio(value, this.prevSrc);
			}
		},
		itemChange(e){
			this.isReport=true;
		}
	},
	methods: {
		change(e) {
			var that = this;
			audioManager.seek(e.detail.value);
			that.current = e.detail.value;
			this.isSeeking = false;
		},
		changing() {
			this.isSeeking = true;
		},
		Pause() {
			audioManager.pause();
			this.playing = false;
			this.$emit('changeStatus', { playing: this.playing });
		},
		Play() {
			audioManager.play();
			this.playing = true;
			this.$emit('changeStatus', { playing: this.playing });
		},
		Prev() {
			// #ifdef H5
			audioManager.destroy();
			audioManager = uni.createInnerAudioContext();
			// #endif
			this.isReport=true;
			this.$emit('Prev');
		},
		Next() {
			// #ifdef H5
			audioManager.destroy();
			audioManager = uni.createInnerAudioContext();
			// #endif
			this.isReport=true;
			this.$emit('Next');
		},
		Circle() {
			this.isCircle = !this.isCircle;
		},
		InitAudio(value, prevSrc) {
			var that = this;
			if (prevSrc) {
				this.disabled = true;
			} else {
				this.disabled = false;
			}
			// #ifdef MP-WEIXIN

			audioManager.title = this.title;
			audioManager.singer = this.singer;
			if (this.logo) {
				audioManager.coverImgUrl = this.logo;
			}
			if (prevSrc) {
				audioManager.src = prevSrc;
				audioManager.seek(0);
			} else {
				audioManager.src = value;
			}
			// #endif
			// #ifdef H5

			// audioManager.autoplay = true;
			if (prevSrc) {
				audioManager.src = prevSrc;
				audioManager.seek(0);
			} else {
				audioManager.src = value;
			}
			// #endif
			audioManager.play();
			audioManager.onPlay(function() {
				that.playing = true;

				that.$emit('onPlay');
			});

			audioManager.onTimeUpdate(function() {
				if (!that.isSeeking) {
					that.duration = audioManager.duration;
					that.current = audioManager.currentTime;				
					if (that.isReport&&!that.isPrev) {
						that.$emit('reportPlayTime', { duration: audioManager.duration });
						that.isReport=false;
					}
				}
			});
			audioManager.onError(function() {
				that.playing = false;
				that.$emit('changeStatus', { playing: false });
			});
			if (prevSrc) {
				audioManager.onEnded(function() {
					// #ifdef H5
					audioManager.destroy();
					audioManager = uni.createInnerAudioContext();
					// #endif
					audioManager.src = value;
					that.InitAudio(that.src);
				});
			} else {
				audioManager.onEnded(function() {
					// #ifdef H5
					audioManager.destroy();
					audioManager = uni.createInnerAudioContext();
					// #endif
					if (!that.isCircle) {						
						that.isReport=true;
						that.$emit('End', { isCircle: that.isCircle });
					} else {
						audioManager.src = that.src;
						that.InitAudio(that.src, that.prevSrc);
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.yxyl-audio-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	.yxyl-audio-scroll {
		width: 90%;
		margin: 0 auto;
		height: 240rpx;

		padding: 10rpx 0;
	}
	.yxyl-audio-text {
		text-align: center;
		line-height: 50rpx;
	}
	.yxyl-audio-control {
		display: flex;
		width: 90%;
		margin: 0 auto;
		flex-direction: column;
		margin-top: 20rpx;
		height: 300rpx;
	}
	.yxyl-audio-control-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 150rpx;
		.yxyl-audio-control-item-avatar {
			width: 20vw;
			height: 20vw;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.yxyl-audio-control-item-right {
			display: flex;
			flex-basis: 65vw;
			flex-grow: 0;
			flex-shrink: 0;
			flex-direction: column;
			justify-content: space-between;
			height: 90%;
			.title {
				font-size: 34rpx;
				overflow: hidden;
				text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
				display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
				-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 2; /* 文本需要显示多少行 */
			}
			.slider-container {
				width: 100%;
				display: flex;
				align-items: center;
				.rod {
					font-size: 26rpx;
				}
				.slider {
					margin: 0 !important;
					padding: 0 10px !important;
					width: 100%;
				}
			}
		}
		.yxyl-audio-control-btns {
			width: 100%;
			display: flex;
			justify-content: space-around;
			.btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.text {
					font-size: 30rpx;
					color: #808080;
					padding-top: 5px;
				}
			}
		}
	}
}
</style>
